<template>
  <div class="comment">
    <MainTitle :title-name="'评论'" />
    <Comment v-if="hasUser" :id="-1" :add-comment="addComment" />
    <template v-for="(item, index) in comments">
      <el-divider v-if="index !== 0" :key="index"></el-divider>
      <el-row :key="index" class="comment__list">
        <el-col :span="2" class="comment__list__avatar">
          <el-avatar
            :src="`${avatar}/${item.user.avatar}`"
            :size="40"
          ></el-avatar>
        </el-col>
        <el-col :span="22" class="comment__list__info">
          <el-row class="comment__list__userInfo">
            <el-col :span="22">
              <nuxt-link :to="`/user/${item.user.id}/attention`">
                {{ item.user.name }}
              </nuxt-link>
              &nbsp;&nbsp;
              <span style="color:#888">{{ item.time }}</span>
            </el-col>
            <el-col
              v-if="hasUser"
              :span="2"
              class="comment__list__userInfo--reply"
            >
              <Reply :item="item" :add-comment="addComment" /> </el-col
          ></el-row>
          <el-row class="comment__list__info__content">{{
            item.content
          }}</el-row>
          <el-row v-if="hasReply(item.reply)" class="comment__list__reply">
            <template v-for="(itemReply, indexReply) in item.reply">
              <el-divider :key="indexReply"></el-divider>
              <el-row :key="indexReply" class="comment__list__reply">
                <el-col :span="2" class="comment__list__avatar">
                  <el-avatar
                    :src="`${avatar}/${itemReply.user.avatar}`"
                    :size="40"
                  ></el-avatar>
                </el-col>
                <el-col :span="22" class="comment__list__info">
                  <el-row class="comment__list__userInfo">
                    <el-col :span="22">
                      <nuxt-link :to="`/author/${itemReply.user.id}/dynamic`">
                        {{ itemReply.user.name }}
                      </nuxt-link>
                      &nbsp;&nbsp;
                      <span style="color:#888;font-size:12px;">
                        @回复：
                        <nuxt-link
                          :to="`/author/${itemReply.replyUser.id}/dynamic`"
                        >
                          {{ itemReply.replyUser.name }}
                        </nuxt-link>
                      </span>
                      &nbsp;&nbsp;<span style="color:#888">{{
                        itemReply.time
                      }}</span>
                    </el-col>
                    <el-col
                      v-if="hasUser"
                      :span="2"
                      class="comment__list__userInfo--reply"
                    >
                      <Reply :item="itemReply" :add-comment="addComment" />
                    </el-col>
                  </el-row>
                  <el-row class="comment__list__info__content">{{
                    itemReply.content
                  }}</el-row>
                </el-col>
              </el-row>
            </template>
          </el-row>
        </el-col>
      </el-row>
    </template>
  </div>
</template>

<script>
import _ from 'lodash'
import MainTitle from '../MainTitle'
import Comment from './Comment'
import Reply from './reply'
import { AVATAR } from '@/assets/js/settings'
export default {
  components: { MainTitle, Comment, Reply },
  props: {
    comments: {
      type: Array,
      default: () => {
        return []
      }
    },
    addComment: {
      type: Function,
      default: () => {}
    }
  },
  computed: {
    avatar() {
      return AVATAR
    },
    hasUser() {
      return this.$store.state.user.hasUser
    }
  },
  methods: {
    hasReply(reply) {
      return !_.isEmpty(reply)
    }
  }
}
</script>

<style lang="scss" scoped>
.comment__list {
  margin: 14px 0px;
}
.comment__list__reply {
  margin: 10px 0;
  &:last-child {
    margin-bottom: 0;
  }
}
.comment__list__avatar {
  @include flexCenter;
}
.comment__list__info {
  @include flexCenter($ai: flex-start, $fd: column);
}
.comment__list__userInfo {
  width: 100%;
  & > .el-col {
    @include flexCenter($jc: flex-start);
  }
  .comment__list__userInfo--reply {
    @include flexCenter($jc: flex-end);
  }
  @include font(12px);
}
.comment__list__userInfo {
  @include font(12px, $align: right);
}
.comment__list__info__content {
  @include font();
}
.comment__list__reply {
  width: 100%;
}
.el-divider {
  margin: 0;
}
</style>
